<template>
	<view class="content">
		<tabar :current="2"></tabar>	
		<view class="class_h" style="background-color: #fff">
		        <view class="top" @click="return_step">					
					<image src="../../../static/resource/back.png" mode="aspectFill" style="width: 74px;height: 30px;"></image>
				</view>
				<text class="task_name">任务管理</text>
		</view>	
	
		<view  style="margin-top: 20px; background-color: #fff;" class="home_container">
			<view class="flex gift_text">
				<text>实物奖励：（任选其一）</text>
			</view>
			<view class="banner" id="banner">
				<radio-group @change="onSelect">
				<swiper  @change="change"  circular="true" interval="3000"   indicator-color="#8799a3"   previous-margin="55px" next-margin="55px"  :style="{'height':swiperHeight+'px'}">
				   <block v-for="(item,index) in bannner_list" :key="index">
					  <swiper-item :class="(cardCur==index?'cur':'')">
						<view class="swiper-view"  @click="select_goods(item)">
						  <image :src="item.goods_logo" class="img" mode="aspectFill"></image>
						  <text class="mt-30 flex align-center justify-center text-center" style="font-weight: bold;">{{item.goods_title}} </text>
						  <!-- 这里是新增的单选框 -->
						  
						</view>
						<view class="flex justify-center" style="margin-top: -120rpx;">
							<radio :value="item.id.toString()" color="#287EE4" :checked="selectedId === item.id" />
						</view>
					  </swiper-item>
					</block>
			     </swiper>
				</radio-group>
				<view class="flex pb-30 flex-direction" style="width: 93%;margin-left: 32rpx;margin-right: 40rpx;">
					<view class="flex gift-titles">
						<!-- 积分奖励：35 积分 -->
					</view>
					<button formType="submit" style="background: #FFC116; color: white; width: 100%;margin-right: 40rpx;"   @click="order_step()">下一步</button>
					<button formType="submit" style="background: #FFC116; color: white; width: 100%;margin-right: 40rpx; margin-top: 20rpx;"   @click="share_sign()">分享至朋友圈后领取</button>
				</view>
			  
			</view>		
		</view>
			<!-- 	商品图片 -->
		<u-popup :show="show" @close="goods_close"  mode="center" :round="10">
			<view class="goods_list">
				<view class="flex close_icon" @click="goods_close">
					<image src="../../../static/resource/close.png" style="width: 74px;height: 30px;"></image>
				</view>
				<view class="flex gift-title flex-direction mr-30">
					<image :src="goods_info.goods_logo" alt="" style="width: 297px;height: 298px; border-radius: 12rpx;" mode="aspectFill"></image>		
					<text class="mt-30">{{goods_info.goods_title}}</text>
					<text class="mt-20">{{goods_info.goods_intro}}</text>
					<text class="mt-15" style="color: #666666;font-weight: 500;line-height: 46rpx;">{{goods_info.goods_content}}</text>
				</view>					
			</view>				
		</u-popup>	
	</view>
	

		
		
</template>

<script>
	export default {
		data() {
			return {
				cardCur:0,
				autoplay:true,
				current:1,
				swiper_curent:0,
				newlist:{},
				bannner_list:{},
				swiperHeight:'',
				isLoading:true,
				selectedId: 0, // 选中的商品ID
				show:false,
				goods_info:{},
				sign_day:'',
			}
		},
		created(){
			
			var that=this
			uni.getSystemInfo({
		        success:function(e){
			     that.swiperHeight = e.screenHeight -350
		        },
			})
		},
		onLoad(event) {
			console.log('event',event)
			this.sign_day=event.sign_day
		},	
		onShow() {
			let user_info=uni.getStorageSync('userInfo');
			let that = this
			
			let obj_data={
				token:user_info.token,
			    login_type:'app'
			};
			that.$http.getUser(obj_data).then(res=>{				
				if(res.resCode=='9999'){
					uni.setStorageSync('userInfo',res.data);	
				    that.userInfo=res.data	
					
					if(res.data.wx_openid){
						let obj_data={
						  sign_day:that.sign_day,
						  token:uni.getStorageSync('userInfo').token,
						}
					   that.getNewInfo(obj_data)//获取图片信息
					}else{
						uni.login({
						    provider: 'weixin',
						    success: function (res) {
								if (res.code) {
									let obj_data={
									  sign_day:that.sign_day,
									  token:uni.getStorageSync('userInfo').token,
									  code:res.code
									}
									that.getNewInfo(obj_data)//获取图片信息
								}
							},
						})
					}
					
				}				
			})	
		},
		methods: {	
			 ...getApp().globalData.function,
			getNewInfo(obj_data){
				let that=this
			    
			     this.$http.NewList(obj_data).then(res=>{
			        if(res.resCode=='9999'){
						that.bannner_list=res.data.list
			        }else{
						uni.showToast({title:res.resMessage,icon:"error"}) 
						setTimeout(function(){
							that.$routers.router('/pages/clock/index','switchTab') 
						},3000)
					}
			     })
			},
			animationfinish:function(e){
                this.cardCur = e.detail.current;
                this.$emit('animationfinish',e)
            },
		    onSelect(id) {
			  this.selectedId = id;
			  console.log('当前选中商品ID：', id);
			},
			
			//点击奖励
			select_goods(item){
				this.show=true
				this.goods_info=item
				console.log('item',item)
			},
			goods_close(){
				console.log('ok')
				this.show=false
			},
			
			 onSelect(e) {
			      this.selectedId = Number(e.detail.value);
			      console.log('选中奖品 ID:', this.selectedId);
			    },

            change:function(e){
				this.swiper_curent=e.detail.current
            },
            
			//下载图片
			order_step(){
				if(this.selectedId==0) {
					uni.showToast({title:'请选择商品',icon:"none"}) 
					return
				}				
				let obj={
					goodsId:this.selectedId,
					sign_day:this.sign_day,
				}
				this.$routers.router('/pages/discover/order/index?obj='+JSON.stringify(obj),'navigateTo') 
			},
			
			
			//签到海报
			share_sign(){
				if(this.selectedId==0) {
					uni.showToast({title:'请选择商品',icon:"none"}) 
					return
				}	
				uni.showLoading({
				  title: '加载中...',
				  mask: true // 防止触摸穿透
				})
				this.$http.pointsShare({type:2,token:uni.getStorageSync('userInfo').token,goodsId:this.selectedId}).then(res =>{
					if(res.resCode=='9999'){
						uni.downloadFile({
							url:  res.data.url,//必须是接口返回的路径，才可以保存到手机相册
							success(res) {
								uni.hideLoading()
								console.log(res,'res下载返回图片路径');
								
								// 图片保存到本地
								uni.saveImageToPhotosAlbum({
									
									filePath: res.tempFilePath,
									success(data) {
										uni.showToast({
											title: '保存成功',
											icon: 'success',
											duration: 2000
										});
									},
									fail(err) {
										console.log(err.errMsg);
										if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
											uni.showToast({
												title: '请允许访问相册后重试',
												icon: 'none',
												duration: 1000
											});
											setTimeout(() => {
												uni.openSetting();
											}, 1000);
										}
									},
									complete(res) {
										console.log('complete');
									}
								});
							}
						})
					}	
				})
			},
			
			
			
			//返回上一页
			return_step(){
				this.$routers.router('/pages/clock/index','switchTab') 
			}
		}
	}
</script>

<style>
	.goods_list{
		 display: flex;
		 width: 344px;
		 flex-direction: column;
		 position: relative;
		 padding-bottom: 110rpx;
	}
	
	 .close_icon{
		 padding-top: 30rpx;
		 padding-left: 30rpx;
		 padding-bottom: 20rpx;
		 border-bottom: 2rpx solid  #EAEAEA;
	 }
	 .gift-title{
		 margin-top: 20rpx;
		 margin-left: 45rpx;
		 color: #333333;
		 font-weight: bold;
		 font-size: 16px;
	 }
	 .task_name{
	    position: fixed;
	     top: 110rpx;       /* 顶部距离 */
	     left: 50%;         /* 左边从屏幕中间开始 */
	     transform: translateX(-50%); /* 水平居中 */
	     font-weight: 600;
	     font-size: 38rpx;
	     color: #333333;
	     line-height: 49rpx;
	     text-align: center; /* 内容居中 */
	 }
	 .gift-container {
	   display: flex;
	   flex-direction: column;
	  /* align-items: center; */
	   text-align: center;
	   margin-left: 180rpx;
	   margin-top: 30rpx;
	 }
	 
	 /* 每行 */
	 .item {
	   display: flex;
	   align-items: center; /* 垂直居中关键 */
	/*   justify-content: center; */
	   margin-bottom: 45rpx;
	   
	 }
	 
	 /* 圆点 */
	 .dot {
	   width: 16rpx;
	   height: 16rpx;
	   border-radius: 50%;
	   background-color: #287EE4;
	   margin-right: 8rpx;
	 
	   /* 关键调整 */
	   display: inline-block; 
	   vertical-align: middle;
	 }
	 
	 /* 文字 */
	 .label {
	   font-size: 28rpx;
	   color: #333;
	   line-height: 16rpx; /* 与圆点高度一致 */
	   display: inline-block;
	   vertical-align: middle;
	 }
	
	.gift-titles{
		 margin-top: 20rpx;
		 color: #333333;
		 font-weight: bold;
		 font-size: 16px;
		 margin-bottom: 30rpx;
	}
	.content{
		background-color: #ececec
	}
	.gift_text{
		display: flex;
		padding-top: 20rpx;
		padding-left: 32rpx;
		margin-bottom: -20rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.swiper-view {
	  width: 280px;
	  display: block;
	  height: 380px;
	  transform: scale(0.9);
	  transition: all 0.2s ease-in 0s;
	  overflow: hidden;
	  border-radius: 60rpx;
	  border: 2rpx solid #EAEAEA;
	  /* background: whitesmoke; */
	  text-align: center;
	}
 .img{	
	  width: 280px;
	  height: 280px;
	}
	
	.class_h{
		display: flex;
		flex-direction: column;
		background-size: 100% 100%;
		padding-bottom: 190rpx;
		position: relative;
	}
	
	.top{
		position: fixed;
		padding-top: 110rpx;
		font-weight: 600;
		font-size: 38rpx;
		color: #333333;
		line-height: 49rpx;
		 left: 30rpx
	}
	
</style>
